<template>

        <div class="search" style="display: flex;justify-content: space-between;align-items: center;">
            <van-search v-model="value" 
                        placeholder="输入影城名称" 
                        style="margin-top: 10px;width: 95%;"
                        @update:model-value="modelValue"
                        :show-action="true"
                        @cancel="clickCancel"/>
        </div>
        <van-empty v-show="showSearch" description="没有找到匹配的影院" />

        <div class="list" v-show="searchFlag"
            style="margin: 10px 20px;"  v-for="item in searchList" :key="item.cinemaId">
            <div class="item">
                <span style="max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;">{{ item.name }}</span>
                <span style="color: #ff5f16;">￥40</span>
            </div>
            <div class="item">
                <span style="color: #797d82;
                            font-size: 12px;
                            max-width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                ">{{  item.address }}</span>
                <span style="color: #797d82;font-size: 12px;">距离未知</span>
            </div>
            
        </div>
</template>



<script setup>
import { inject, onMounted, ref } from 'vue';
import listStore from '../store';
import router  from '../router';

const value = ref("")

const store = listStore()

const searchFlag = ref(false)
const searchList = ref([])
const showSearch = ref(false)


onMounted(() =>{
    store.getCinemaList(store.cityId,store.ticketFlag)
})
const modelValue = (value) =>{
    console.log(value);
    searchFlag.value = true
    // 判断输入的名称是否匹配
    if(value) {
        searchList.value = store.cinemaList.filter(item=>{
    if (item.name.includes(value) ||item.address.includes(value)) {
        return item
    }
   })
   showSearch.value = false
    }
   console.log("2222",searchList.value);
   if(value === "" ){
    searchFlag.value = false
   }
   // 没有匹配到数据显示占位
   if(searchList.value.length === 0) {
    showSearch.value = true
   }
}

// 取消按钮回调
const clickCancel = () =>{

    // 判断用户回到哪个路由
    console.log(store.filmId);
    if(store.filmId) {

        router.push(`/list/${store.filmId}/cinemas`)
       
    } else {
        router.push("/cinemas")
      
    }
   
}
</script>


<style scoped>
.item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>